<template>
  <el-table-column v-if="type === 'print'" v-bind="$attrs" :align="align" :width="width">
    <template v-slot:default="scope">
      <span v-if="scope" class="print_check" />
    </template>
  </el-table-column>

  <el-table-column
    v-else-if="type === 'selection'"
    :type="type"
    v-bind="$attrs"
    :align="align"
    :selectable="selectAble.bind($attrs)"
    :width="55"
  />

  <el-table-column
    v-else-if="type === 'formatter'"
    v-bind="$attrs"
    :align="align"
    :width="width"
    :type="type"
    :formatter="formatterMethods"
  />

  <el-table-column v-else-if="type === 'dialog'" v-bind="$attrs">
    <template v-slot:default="scope">
      <span
        v-if="isShowClickMethods(scope.row)"
        style="text-decoration: underline; color: #0e90d2; cursor: pointer"
        @click="dialog_show(scope.row)"
        >{{ scope.row?.name }}</span
      >
      <span v-else>
        {{ scope.row?.name }}
      </span>
    </template>
  </el-table-column>

  <el-table-column v-else-if="type === 'tag'" v-bind="$attrs">
    <template v-slot:default="scope">
      <el-tag v-if="scope.row?.name === 1" size="small" type="danger">停用</el-tag>
      <el-tag v-else size="small" type="success">正常</el-tag>
    </template>
  </el-table-column>

  <el-table-column
    v-else-if="type === 'button'"
    v-bind="$attrs"
    :align="align"
    :width="buttonWidth"
  >
    <template v-slot:default="scope">
      <div style="display: flex; justify-content: center; margin-right: 10px">
        <span v-for="(button, idx) in buttons" :key="idx">
          <span
            v-if="buttonShow(scope.$index, scope.row, button)"
            style="margin-left: 10px; cursor: pointer"
            :style="{ color: button.color ? button.color : '#e55f54' }"
            @click.stop="handleButton(idx, scope.row, button, scope.$index)"
            >{{ button.name }}
          </span>
        </span>
      </div>
    </template>
  </el-table-column>
  <el-table-column v-else-if="type === 'tooltip'" v-bind="$attrs" :align="align" :width="width">
    <template v-slot:default="scope">
      <el-tooltip effect="light" :content="scope.row?.name" :disabled="!scope.row?.name">
        <div class="tooltip">
          {{ scope.row?.name }}
        </div>
      </el-tooltip>
    </template>
  </el-table-column>
  <el-table-column v-else-if="type === 'multColumns'" v-bind="$attrs" align="center" :width="width">
    <template v-slot:default="scope">
      <div v-for="(item, index) in slotName" :key="index" class="textLeft">
        <span
          v-if="fieldShow(item, scope.row)"
          @click.prevent.stop="handleButton(index, scope.row, item, scope.$index)"
        >
          {{ item.label }}：{{ scope.row[item.name] }}
        </span>
      </div>
    </template>
  </el-table-column>
  <el-table-column v-else-if="type === 'headerMerge'" v-bind="$attrs" :align="align" :width="width">
    <el-table-column
      v-for="(ite, $index) in headerArr"
      :key="$index"
      align="center"
      :prop="ite.name"
      :label="ite.label"
      :width="ite.width"
    >
    </el-table-column>
  </el-table-column>
  <el-table-column v-else-if="type === 'htmlContent'" v-bind="$attrs" :align="align" :width="width">
    <template v-slot:default="scope">
      <span v-html="scope.row[scope.column.property]"></span>
    </template>
  </el-table-column>
  <el-table-column
    v-else
    v-bind="$attrs"
    :sortable="sortable"
    :align="align"
    :width="dateWidth($attrs)"
    :type="type"
  />
</template>

<script setup lang="ts" name="report-column">
import { computed } from 'vue'
const $emit = defineEmits(['button-handle'])

const props = defineProps({
  sortable: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: ''
  },
  hidden: {
    type: Boolean,
    default: false
  },
  align: {
    type: String,
    default: 'center'
  },
  buttons: {
    type: Array as any,
    default: () => []
  },
  selectable: {
    type: Function
  },
  isShowClick: {
    type: Function
  },
  formatterType: {
    type: [String, Function] as any,
    default: ''
  },
  iconName: {
    // 传表头需要自定义添加的icon名
    type: String,
    default: ''
  },
  // 提示内容
  tooltipContent: {
    type: String,
    default: ''
  },
  // 字段内展示多个字段
  slotName: {
    type: Array as any,
    default: () => []
  },
  headerArr: {
    type: Array as any,
    default: () => []
  }
})

const buttonWidth = computed(() => {
  if (!props.width) {
    return props.buttons.length * 80
  }
  return props.width
})
const dateWidth = (v: any) => {
  if (!props.width) {
    const reg = /日期|时间/
    if (reg.test(v.label)) {
      return '140px'
    } else {
      return props.width
    }
  }
  return props.width
}

const renderHeader = function (h: any, { column }: any) {
  const className = props.iconName ? props.iconName : ''
  const content = props.tooltipContent
  return h(
    'el-tooltip',
    {
      props: {
        content: content,
        placement: 'top',
        effect: 'light',
        disabled: !content
      },
      domProps: {
        innerHTML: `${column.label}<span class=${className}></span>`
      }
    },
    [h('p')]
  )
}
const formatterMethods = function (
  row: { [x: string]: any },
  column: { property: string | number }
) {
  if (props.formatterType) {
    return props.formatterType(row)
  }
  const nums = parseFloat(row[column.property] || 0).toFixed(2)
  // const nums = row[column.property]; // 若后端金额不是两位小数，则无法转换
  const tostringNum = nums.toString().replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
  return `${tostringNum}`
}
const isShowClickMethods = function (row: any) {
  if (props.isShowClick) {
    return props.isShowClick(row)
  }
  return true
}
const buttonShow = function (index: any, row: any, button: any) {
  if (button.isShow) {
    return button.isShow(index, row, button)
  }
  return true
}
const fieldShow = function (field: any, row: any) {
  if (field.isShow) {
    return field.isShow(row)
  }
  return true
}
const handleButton = function (idx: any, itemRow: any, button: any, index: any) {
  $emit('button-handle', button, itemRow, index)
}
const selectAble = function (row: any, index: any) {
  if (props.selectable) {
    return props.selectable(row, index)
  }
  return true
}
const dialog_show = function (row: any) {
  $emit('button-handle', 'dialogDetail', row)
}
</script>

<style lang="less" scoped>
.print_check {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid #ddd;
}
.tooltip {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  cursor: pointer;
}
.textLeft {
  text-align: left;
}
</style>
